<!DOCTYPE html>
<html ng-app="webapp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>W10</title>
    <script src="js/angular-1.4.8.min.js"></script>
</head>

<body>
    <div layout="row">
        <div flex="28">
            <a href="#home" class="btn btn-success btn-lg">Home</a>
            <br>
            <a href="#about" class="btn btn-danger btn-lg">About</a>
        </div>
        <div flex="71" ng-controller="myCtrl">
            <!-- 例1 -->
            <table>
                <tr>
                    <th ng-click="f='name'; rev=!rev">名字</th>
                    <th ng-click="f='age'; rev=!rev">年龄</th>
                </tr>
                <tr ng-repeat="o in data | orderBy: f : rev">
                    <td>{{ o.name }}</td>
                    <td>{{ o.age }}</td>
                </tr>
            </table>

        <!-- 例2 -->
          <div ng-init="s=data[0].name; q=''">
            <div>
              <span>查找：</span> <input type="text" ng-model="q" />
            </div>
            <select ng-multiple="true" ng-model="s"
                    ng-options="o.name as o.name + '(' + o.age + ')' for o in data | filter: {name: q} | orderBy: ['age', 'name'] ">
            </select>
          </div>

            </form>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
var app = angular.module('webapp', []);
app.controller('myCtrl', ['$scope','$log', function($scope) {
    $scope.data = [
           {name: 'B', age: 4},
           {name: 'A', age: 1},
           {name: 'D', age: 3},
           {name: 'C', age: 3},
         ];
         $log.log('log');
}]);

var aa = {'x': '123'};
  var bb = angular.copy(aa);
  aa.x = '456';
  console.log("aa=");
  console.log(aa);
  console.log("bb=");
  console.log(bb);


</script>
